<template>
    <div class="main-content-center">
        <!-- <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item
                    ><a style="font-weight: 500;">智提升</a></el-breadcrumb-item
                >
                <el-breadcrumb-item><span>趣练</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="big-title">
            趣练
        </div>
        <nav-select
            :navData="nav_Select"
            @getSectionList="getSectionList"
        ></nav-select>

        <div class="content-flex">
            <fold
                :showSectionList="showSectionList"
                :showIndex="isShowSecondSectionIndex"
                :secondSectionList="secondSectionList"
                @getSectionList="getSectionList"
                :sNoData="sNoData"
                :ssNoData="ssNoData"
                :ssLastPage="ssLastPage"
                :sTotal="sTotal"
                :ssTotal="ssTotal"
                :sid="sid"
            ></fold>
            <learning-situation></learning-situation>
        </div>

        <!-- 闯关弹窗 -->
        <el-dialog
            title="你还有有题目未做，需要继续闯关吗？"
            :visible.sync="dialogTableVisible"
            v-if="show_alter"
            :show-close="false"
            :close-on-click-modal="false"
            center
            width="400px"
            ><div class="image">
                <img src="@/assets/images/InterestingPractice/alter.png" />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="click_alter(0)">放弃闯关</el-button>
                <el-button type="primary" @click="click_alter(1)"
                    >继续闯关</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>

<script>
import navSelect from "@/components/navSelect/index";
import fold from "./components/fold";
import learningSituation from "@/components/learningSituation/index";
import { getSubject } from "@/api/testQuestions/subject";
import { getSectionLists } from "@/api/testQuestions/section";
import {
    getInterestDetail,
    InterestList,
    InterestOut
} from "@/api/InterestingPractice/index";
export default {
    components: {
        navSelect,
        fold,
        learningSituation
    },
    props: {},
    data() {
        return {
            sTotal: 0,
            ssTotal: 0,
            sLastPage: 1,
            ssLastPage: 1,
            sNoData: false,
            ssNoData: false,
            isNoSection: false, // 是否没有章节
            showMore: false, //是否出现加载更多
            nav_Select: [], //科目列表1
            subjectList: [], //科目列表2
            showSectionList: [], //试题
            isShowSecondSectionIndex: -1,
            isShowCollaspe: true, //是否显示折叠栏
            secondSectionList: [], // 子章节
            secondSectionList2: [], //子章节2
            sid: null, //sid
            loading: null, //加载
            show_alter: false,
            sid1: null,
            zid: null,
            section_name: null,
            interest_id: null,
            dialogTableVisible: true //弹窗显示
        };
    },
    computed: {},
    watch: {},
    beforeCreate() {
        // 生命周期钩子：组件实例刚被创建，组件属性计算之前，如 data 属性等
    },
    created() {
        // 生命周期钩子：组件实例创建完成，属性已绑定，但 DOM 还未生成，el 属性还不存在
        // 初始化渲染页面
    },
    beforeMount() {
        // 生命周期钩子：模板编译/挂载之前
    },
    mounted() {
        // 生命周期钩子：模板编译、挂载之后（此时不保证已在 document 中）
        this.getSubjectList();
        this.getRecord1();
    },
    methods: {
        //获取科目列表
        getSubjectList() {
            var obj = {
                pagesize: 20,
                textbook: this.$store.getters.userInfo.textbook
            };
            getSubject(obj).then(res => {
                if (res.code === 200) {
                    this.subjectList = res.data;
                    this.sid = res.data[0].sid;
                    var subjectObj = {};
                    var max = 10;
                    if (res.data.length > max) {
                        subjectObj = {
                            fold: true,
                            index1: 0,
                            showTypeLength: max,
                            max: max,
                            checkName: res.data[0].subject_name,
                            name: "科目",
                            list: res.data
                        };
                    } else {
                        subjectObj = {
                            max: max,
                            checkName: res.data[0].subject_name,
                            name: "科目",
                            list: res.data
                        };
                    }
                    this.nav_Select.push(subjectObj);
                    this.getSectionList(1, "", "", "", this.sLastPage);
                }
            });
        }, // 获取试题列表
        getSectionList(type, zid, index, sid, sPage, ssPage) {
            this.loading = this.$loading({
                lock: true,
                text: "加载中",
                spinner: "el-icon-loading",
                background: "rgba(255, 255, 255, 0.5)"
            });
            if (index == this.isShowSecondSectionIndex) {
                this.isShowSecondSectionIndex = -1;
            }
            var reqObj = {
                textbook: this.$store.getters.userInfo.textbook,
                education: this.$store.getters.userInfo.education,
                sid: this.sid,
                type: type,
                grade: this.$store.getters.userInfo.grade,
                pagesize: 8
            };
            if (zid) {
                reqObj.fid = zid;
            }
            if (index) {
                this.isShowSecondSectionIndex = index;
            }
            if (sid) {
                reqObj.sid = sid;
                this.sid = sid;
                this.isShowSecondSectionIndex = -1;
            }
            if (type == 1) {
                reqObj.page = sPage;
            } else if (type == 2) {
                reqObj.page = ssPage;
            }
            this.sNoData = false;
            this.ssNoData = false;
            var secondSectionList2 = [];
            getSectionLists(reqObj).then(res => {
                if (res.code === 200) {
                    if (res.data.data.length > 0) {
                        if (type == 1) {
                            this.showSectionList = res.data.data;
                            this.sLastPage = res.data.last_page;
                            this.sTotal = res.data.total;
                            this.getSectionList(
                                2,
                                this.showSectionList[0].zid,
                                1
                            );
                        } else {
                            this.ssLastPage = res.data.last_page;
                            this.ssTotal = res.data.total;
                            secondSectionList2 = res.data.data;
                            if (this.ssLastPage >= ssPage) {
                                this.secondSectionList2 = this.secondSectionList2.concat(
                                    secondSectionList2
                                );
                            } else {
                                this.secondSectionList2 = secondSectionList2;
                            }
                            var ids = [];
                            this.secondSectionList2.forEach(item => {
                                ids.push(item.zid);
                            });
                            this.getRecord(ids);
                        }
                    } else {
                        if (type == 1) {
                            this.sNoData = true;
                        } else {
                            this.ssNoData = true;
                            this.$message.error("暂无数据");
                        }
                        this.loading.close();
                        // this.$message.error("该书本暂无优课");
                    }
                } else {
                    this.showMore = false;
                    this.isNoSection = true;
                    this.lastPage = 0;
                    this.sectionList = [];
                }
                // this.$forceUpdate();
            });
        },

        // 获取每个试题的闯关记录
        getRecord(ids) {
            getInterestDetail({
                chapterids: ids.join(",")
            }).then(res => {
                if (res.code == 200) {
                    var list = res.data;
                    for (var i = 0; i < list.length; i++) {
                        if (!list[i].user_number_pass) {
                            list[i].user_number_pass = 0;
                        }
                        if (
                            list[i].user_number_pass > 0 &&
                            list[i].user_number_pass < list[i].number_pass
                        ) {
                            list[i]["state"] = "handing";
                        } else if (
                            list[i].user_number_pass > 0 &&
                            list[i].user_number_pass < list[i].number_pass &&
                            list[i].master_degree == 2
                        ) {
                            list[i]["state"] = "right";
                        } else if (
                            list[i].user_number_pass == list[i].number_pass &&
                            list[i].master_degree != 2
                        ) {
                            list[i]["state"] = "wrong";
                        } else if (list[i].user_number_pass == 0) {
                            list[i]["state"] = "begin";
                        }
                    }
                    var secondSectionList2 = this.secondSectionList2;
                    for (let i = 0; i < secondSectionList2.length; i++) {
                        for (let j = 0; j < list.length; j++) {
                            if (
                                secondSectionList2[i].zid == list[j].chapterid
                            ) {
                                secondSectionList2[i].master_degree =
                                    list[j].master_degree;
                                secondSectionList2[i].number_pass =
                                    list[j].number_pass;
                                secondSectionList2[i].question_count =
                                    list[j].question_count;
                                secondSectionList2[i].user_number_pass =
                                    list[j].user_number_pass;
                                secondSectionList2[i].state = list[j].state;
                            }
                        }
                    }
                    this.secondSectionList = secondSectionList2;
                    console.log("趣练试题列表", this.secondSectionList);
                    this.loading.close();
                }
            });
        },
        // 获取未完成列表
        getRecord1() {
            InterestList({
                practice_state: 1
            }).then(res => {
                if (res.code == 200 && res.data.total > 0) {
                    this.show_alter = true;
                    this.sid1 = res.data.data[0].sid;
                    this.zid = res.data.data[0].zid;
                    this.section_name = res.data.data[0].section_name;
                    this.interest_id = res.data.data[0].interest_id;
                    console.log("sid1", this.sid1);
                    console.log("zid", this.zid);
                    console.log("section_name", this.section_name);
                    console.log("interest_id", this.interest_id);
                } else {
                    this.show_alter = false;
                }
            });
        },
        // 判断是否继续闯关
        click_alter(type) {
            if (type == 1) {
                this.$router.push({
                    path: "/InterestingPractice/breakThrough/index",
                    query: {
                        sid: this.sid1,
                        zid: this.zid,
                        practice_id: 0,
                        section_name: this.section_name,
                        type: type,
                        interest_id: this.interest_id
                    }
                });
            } else {
                InterestOut({
                    interest_id: this.interest_id
                }).then(res => {
                    if (res.code == 200) {
                        this.show_alter = false;
                        this.$message({
                            customClass: "customClass",
                            message: res.msg,
                            type: "success"
                        });
                    } else {
                        this.$message.error(res.msg);
                    }
                    // uni.showToast({
                    //     title: res.data.msg,
                    //     icon: "none"
                    // });
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.main-content {
    .main-content-center {
        padding: 16px 32px;
        box-sizing: border-box;
    }
}
.main-content-center {
    .breadcrumb {
        margin-bottom: 20px;
    }
    .big-title {
        font-size: 20px;
        color: #2d3440;
        margin-bottom: 36px;
    }
}
.content-flex {
    margin-top: 24px;
    display: flex;
}
.image {
    width: 100%;
    text-align: center;
}
</style>
